<!-- 主题 -->
<template>
  <div class="container-app">
    <div id="content" class="bg-white q-pa-md">
      <p @click="changeTheme('#009900')">默认主题</p>
      <p @click="changeTheme('#004288')">主题二</p>
      <p @click="changeTheme('#EB5A30')">主题三</p>
    </div>
  </div>
</template>

<script>
import { setCssVar } from 'quasar'
export default {
  name: 'Theme',
  data () {
    return {
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    changeTheme(theme) {
      if (localStorage.getItem('themeColor_GFYW')) {
        localStorage.removeItem('themeColor_GFYW')
      }
      setCssVar('primary', theme)
      if (theme === '#009900') {
        setCssVar('secondary', '#FE6D01')
        setCssVar('accent', '#FFCD07')

        this.$store.commit('theme/SET_THEME_COLOR', {
          primary: theme,
          accent: '#FFCD07',
          secondary: '#FE6D01'
        })
      } else if (theme === '#004288') {
        setCssVar('secondary', '#ebf3fc')
        setCssVar('accent', '#73b3f7')

        this.$store.commit('theme/SET_THEME_COLOR', {
          primary: theme,
          accent: '#73b3f7',
          secondary: '#ebf3fc'
        })
      } else if (theme === '#EB5A30') {
        setCssVar('secondary', '#f1fdfc')
        setCssVar('accent', '#ffc9b9')

        this.$store.commit('theme/SET_THEME_COLOR', {
          primary: theme,
          accent: '#ffc9b9',
          secondary: '#f1fdfc'
        })
      }

    }
  }
}

</script>
<style lang='scss' scoped>
#content {
  p {
    width: 100px;
    height: 40px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
  }
  p:first-child{
    background-color:#009900;
  }
  p:nth-child(2){
    background-color:#73b3f7;
  }
  p:nth-child(3){
    background-color:#42979f;
  }
  p:last-child{
    background-color:#EB5A30;
  }
}
</style>
